<!--上传-->
<template>
  <div>
    <el-upload
      class="base-upload"
      name="Picture"
      :multiple="multiple"
      :action="uploadFile"
      :headers="headers"
      :show-file-list="false"
      :show-upload-list="false"
      :accept="accept"
      :disabled="uploadLoad || disabled"
      :on-change="uploadImg"
      :auto-upload="false"
    >
      <!--上传loading-->
      <div v-if="uploadLoad" v-loading="true" class="upload-loading" />
      <div v-if="!value" class="upload-button" :class="{ 'no-upload': disabled }">
        <img src="@/assets/img/uploadImgIcon.png" alt />
        <span>点击上传</span>
      </div>
      <img v-else :src="value.url" class="upload-cover" :clas="{ 'no-upload': disabled }" alt />
      <span class="tip-text">请上传大小在1M以内,格式为jpg、jpeg、png的图片,其他格式暂不支持</span>
    </el-upload>
    <BaseLoading v-if="showLoading" :loading-text="'上传中...'" />
  </div>
</template>

<script>
import { uploadFile, uploadImgFile } from "@/api/Base";
import { getToken } from "@/utils/auth";
import { formdataify } from "@/utils/index";
export default {
  name: "BaseUpload",
  props: {
    value: {
      type: Object,
      default: () => { },
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 文件类型
    accept: {
      type: String,
      default: "image/png,image/jpeg,image/jpg",
    },
    // 文件大小
    fileSize: {
      type: Number,
      default: 500,
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 业务类型,请在后端代码Panna.ModuleSystem.Api中的BusinessType中查找对应的业务枚举值
    businessType: {
      type: String,
      default: "0",
    },
    imageWidth: {
      type: String,
      default: "0",
    },
    imageHeight: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      uploadFile,
      uploadLoad: false,
      headers: { Authorization: getToken() },
      filePath: "",
      showLoading: false
    };
  },
  methods: {
    // 上传完成
    uploadImg(info) {
      if (info.status !== "ready") return;
      if (!this.beforeUpload(info)) return;
      this.showLoading = true;
      const obj = {
        businessType: this.businessType,
        imageWidth: this.imageWidth,
        imageHeight: this.imageHeight,
        file: info.raw,
      };
      const form = formdataify(obj);
      uploadImgFile(form)
        .then((res) => {
          this.uploadLoad = false;
          this.showLoading = false;
          const { data } = res;
          this.filePath = data.filePath;
          this.$emit("input", {
            name: data.fileName,
            newName: data.newFileName,
            url: `${data.protocol}${data.fileDomain}/${data.fileBucket}/${data.filePath}`,
            url2: data.filePath,
            fileSize: data.fileSize,
          }
          );
        })
        .catch(() => {
          this.uploadLoad = false;
          this.showLoading = false;
        });

      if (info.status === "fail") {
        this.uploadLoad = false;
        this.$message.error("上传失败");
      }
    },

    // 上传校验 or 大小
    beforeUpload(file) {
      const fileTypes = this.accept.split(",");
      const checkFormat =
        fileTypes.includes(file.raw?.type) ||
        file.type === "image/vnd.microsoft.icon";
      if (!checkFormat) {
        this.$message.error(`请选择${this.accept}格式`);
        return false
      }
      const checkSize = this.fileSize ? (file.size / 1024 < this.fileSize) : true;
      if (!checkSize) {
        this.$message.error(`图片必须小于${this.fileSize}KB！`);
        return false
      }
      this.uploadLoad = false;
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.base-upload {
  height: 136px;
  position: relative;
  .upload-button {
    width: 116px;
    height: 88px;
    background: #f7f8f9;
    border-radius: 4px;
    border: 1px #dedede dashed;
    img {
      display: block;
      width: 32px;
      height: auto;
      margin: 22px auto 10px;
    }
    span {
      display: block;
      width: 100%;
      font-size: 12px;
      line-height: 12px;
      font-weight: 500;
      color: #bfbfbf;
      transform: scale(0.8);
    }
  }
  .upload-cover {
    display: block;
    width: 116px;
    height: 88px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid #dcdfe6;
  }
  .tip-text {
    position: absolute;
    margin-left: -6px;
    left: 0;
    bottom: -10px;
    display: block;
    width: 100%;
    word-break: break-word;
    text-align: left;
    font-size: 6px;
    color: #666666;
    line-height: 18px;
    transform: scale(0.9);
  }
  .upload-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 116px;
    height: 88px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    padding: 1px;
    box-sizing: border-box;
  }
  .no-upload {
    cursor: no-drop;
  }
}
</style>
